import React, { useState } from 'react';
import { Form, Field, Checkbox, Toast ,Notify } from 'react-vant'
import './sign.less'
import request from '../../../utils/request';
export default function Sign(props) {
    const [obj, setobj] = useState({
        name: "",
        tel: "",
        pasw: ''
    })
    const [Btncode, setBtncode] = useState(false) //按钮的颜色
    let [agreement, setagreement] = useState(false) //协议的状态

    const [Ver, setVer] = useState(true) //获取验证码开关
    let [time, settime] = useState(10) //获取验证码倒计时
    const [vercode, setvercode] = useState() //验证码
    const [vernum, setvernum] = useState() //输入的验证码
    function monitor() {
        if (obj.name && obj.tel && obj.pasw !== '') {
            setBtncode(true)
        } else {
            setBtncode(false)
        }
    }
    return <div className='signIn'>
        <header className='signInTop' onClick={() => {
            props.history.go(-1)
        }}>
            <svg className="icon" aria-hidden="true">
                <use xlinkHref="#icon-zuojiantou"></use>
            </svg>
        </header>
        <main>
            <div className='sintitle' onClick={() => {
                console.log(obj);
            }}>
                手机号注册
            </div>
            <div className='portrait'>
                <div>
                    头像
                </div>
            </div>
            <div className='inpbox'>
                <Form>
                    <Form.Item
                        label="昵称"
                        name="text1"
                    >
                        <Field placeholder="例如: 福霖" onChange={(e) => {
                            let useobj = JSON.parse(JSON.stringify(obj))
                            useobj.name = e
                            setobj(useobj)
                            monitor()
                        }} />
                    </Form.Item>
                    <Form.Item
                        label="国家/地区"
                    >
                        <Field readonly placeholder="中国大陆 （+86）" value='中国大陆 （+86）' />
                    </Form.Item>
                    <Form.Item
                        label="手机号"
                        name="text2"
                        rules={[
                            {
                                validator: (_, value) => {
                                    if (/1\d{10}/.test(value)) {
                                        return Promise.resolve(true);
                                    }
                                    return Promise.reject(new Error('请输入正确的手机号码'));
                                },
                            },
                        ]}
                    >
                        <Field placeholder="请填写手机号码" onChange={(e) => {
                            let useobj = JSON.parse(JSON.stringify(obj))
                            useobj.tel = e
                            setobj(useobj)
                            monitor()
                        }} />  
                    </Form.Item>
                    <Form.Item
                        label="密码"
                        name="text3"
                        rules={[
                            {
                                validator: (_, value) => {
                                    if (/^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,18}$/.test(value)) {
                                        return Promise.resolve(true);
                                    }
                                    return Promise.reject(new Error('请输入正确的密码'));
                                },
                            },
                        ]}
                    >
                        <Field type='password' placeholder="请填写密码" onChange={(e) => {
                            let useobj = JSON.parse(JSON.stringify(obj))
                            useobj.pasw = e
                            setobj(useobj)
                            monitor()
                        }} />
                    </Form.Item>
                    <div>
                        <Form.Item
                            label="验证码"
                        // name="text4"
                        >
                            <Field placeholder="请填验证码" onChange={(e) => {
                                setvernum(e)
                            }} />
                            <button disabled={Ver ? '' : 'disabled'} className='verification' onClick={() => {
                                if (obj.tel) {
                                    // 倒计时
                                    const timer = setInterval(() => {
                                        settime(time--)
                                        setVer(false)
                                        if (time < 0) {
                                            clearInterval(timer);
                                            settime(10);
                                            setVer(true)
                                        };
                                    }, 1000);
                                    request.post('/my/rigcode', { tel: obj.tel }).then((res) => {
                                        console.log(res);
                                        if (res.data.code === 0) {
                                            Notify.show({type: 'success', message: `验证码是${res.data.vercode}` })
                                            setvercode(res.data.vercode)
                                        }
                                    })
                                } else {
                                    Toast.fail({ message: '请输入手机号' })
                                }
                            }}>{
                                    Ver ? '获取验证码' : `${time}后新获取`
                                }</button>
                        </Form.Item>

                    </div>
                </Form>
            </div>
        </main>
        <footer>
            <div>
                <Checkbox checkedColor='#05c160' onChange={(e) => {
                    setagreement(e)
                }}>
                    <div>
                        我已阅读并同意<span>《软件许可及服务协议》</span>
                    </div>
                </Checkbox>
            </div>
            <div>本页面收集的信息仅用于注册帐号</div>
            <button disabled={!Btncode ? 'disabled' : ''} className={Btncode ? 'action' : null} onClick={() => {
                if (agreement) {
                    if ((/1\d{10}/.test(obj.tel)) && (/^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,18}$/.test(obj.pasw))) {
                        if(vernum){
                            if (vercode === vernum) {
                                request.post('/my/register', obj).then((res) => {
                                    console.log(res);
                                    if (res.data.code === 1) {
                                        props.history.push({
                                            pathname: '/register',
                                            state: obj.tel
                                        })
                                        Toast.success({ message: '注册成功' })
                                    } else {
                                        Toast.fail({ message: '注册失败，请稍后再试' })
                                    }
                                })
                            } else {
                                Toast.fail({ message: '验证码错误' })
                            }
                        }else{
                            Toast.fail({ message: '请输入验证码' })
                        }
                        
                    } else {
                        Toast.fail({ message: '手机号或密码格式错误' })
                    }
                } else {
                    Toast.fail({ message: '请勾选我已阅读软件许可及服务协议' })
                }
            }}>同意并继续</button>
        </footer>
    </div>
}
